<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClickTab">
      <el-tab-pane label="全部" name="0"></el-tab-pane>
      <el-tab-pane label="短视频素材" name="1"></el-tab-pane>
      <!--    <el-tab-pane label="上新" name="2"></el-tab-pane>-->
      <el-tab-pane label="图片素材" name="3"></el-tab-pane><!--之前叫‘种草’-->
      <!--        <el-tab-pane label="买家秀" name="4"></el-tab-pane>-->
    </el-tabs>
    <div class="filter-container">
      <!--      <el-input v-model.number="listQuery.walkMemberUid" clearable placeholder="创作号" style="width: 200px;" class="filter-item" @keyup.enter.native="getList()" />-->
       <el-select v-model="listQuery.type" placeholder="类型" class="filter-item" clearable filterable>
          <el-option
            v-for="item in typeOptions"
            :key="item.key"
            :label="item.text"
            :value="item.key">
          </el-option>
        </el-select>
      <el-select v-model="listQuery.shopId" placeholder="所属店铺" class="filter-item" clearable filterable>
        <el-option
          v-for="item in shopOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-date-picker class="filter-item" v-model="listQuery.startTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间" />
      -
      <el-date-picker  class="filter-item"  v-model="listQuery.endTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间" />

      <el-select @change="handleSelect" v-model="listQuery.walkMemberId" placeholder="所属会员"
                 class="filter-item" clearable filterable>
        <el-option
          v-for="item in downloadWalkMemberOptions"
          :key="item.id+''"
          :label="item.nickname"
          :value="item.id+''"
        >
        </el-option>
      </el-select>



<!--      <el-select v-model="listQuery.status" placeholder="状态" class="filter-item" clearable filterable>-->
<!--        <el-option-->
<!--          v-for="item in statusOptions"-->
<!--          :key="item.key"-->
<!--          :label="item.text"-->
<!--          :value="item.key"-->
<!--        >-->
<!--        </el-option>-->
<!--      </el-select>-->
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" circle @click="getList"></el-button>
      <!--      <br>-->
      <!--			<el-button-group>-->
      <!--			<el-button class="filter-item" size="mini" type="danger" icon="el-icon-delete" @click="handleDelete">删除</el-button>-->
      <!--			</el-button-group>-->
    </div>
    <el-table
      :key="tableKey"

      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>

      <el-table-column label="类型" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.type == 1" style="color: #C03639;">{{ scope.row.type | typeFilter}}</span>
          <span v-if="scope.row.type == 2" style="color: #00bcbc;">{{ scope.row.type | typeFilter}}</span>
          <span v-if="scope.row.type == 3" style="color: #c885c8;">{{ scope.row.type | typeFilter}}</span>
          <span v-if="scope.row.type == 4" style="color: #00cb00;">{{ scope.row.type | typeFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属商家" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.publishShopName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="下载人" align="center">
        <template slot-scope="scope">
          <el-image
            style="height: 30px"
            :src="scope.row.downloadWalkMemberHeadImg+'?'+$globalImageProcessingSuffix"
            :preview-src-list="[scope.row.downloadWalkMemberHeadImg]">
          </el-image>
          <br>
          <span style="margin-left: 10px">{{ scope.row.downloadWalkMemberName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属商品" align="center">
        <template slot-scope="scope">
          <el-image
            style="height: 30px"
            :src="scope.row.publishGoodsHeadImg+'?'+$globalImageProcessingSuffix"
            :preview-src-list="[scope.row.publishGoodsHeadImg]">
          </el-image>
          <br>
          <span style="margin-left: 10px">{{ scope.row.publishGoodsName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="下载时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.addTime|parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.actions')" class-name="small-padding" fixed="right" width="150px">
        <template slot-scope="scope">
          <el-button-group>
            <el-tooltip class="item" effect="dark" content="查看素材" placement="top">
              <el-button type="primary" icon="el-icon-s-promotion" size="mini" @click="handleViewTrends(scope.row)"
              ></el-button>
            </el-tooltip>
          </el-button-group>

        </template>
      </el-table-column>


    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize"
                @pagination="getList"
    />


    <!--查看详情-->
    <el-dialog
      title="查看素材"
      :visible.sync="dialogViewVisible"
      width="30%"
    >
      <el-alert  class="warn-content"
                 title=""
                 type="success"
                 :closable="false">
        如果是图片请点击放大查看{{trendsDetail.type}}
      </el-alert>
      <div style="margin-top: 10px;">
        <video id="video" height="200" controls="controls" :src="trendsDetail.videoUrl" v-if="trendsDetail.type===1" width="100%">
        </video>
        <el-image
          v-else
          style="height: 80px"
          :src="trendsDetail.imgUrl"
          :preview-src-list="currentTopImgSrcList">
        </el-image>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogViewVisible = false">关 闭</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<style>
.tips-class {
  font-size: 12px;
  color: #999;
}

.comment-item {
  padding: 20px;
  border-radius: 5px;
  background-color: #f9f9f9;
  margin-bottom: 12px;
}

.comment .sub-item {
  padding: 10px;
  background-color: #e8ecef;
  border-radius: 5px;
  margin-top: 5px;
  margin-left: 34px;
}
</style>

<script>
import {getDownloadList, getDownloadWalkMemberSelector} from '@/api/trends'
import waves from '@/directive/waves' // Waves directive
import { parseTime, renderTime } from '@/utils'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import ImageSource from '@/components/Upload/imageSource'
import MultipleUpload from '@/components/Upload/multipleImage'
import SingleVideoUpload from '@/components/Upload/singleVideo'
import {getShopSelector} from "@/api/shop";

const typeOptions = [
  { key: 1, text: '短视频' },
  // { key: 2, text: '上新' },
  { key: 3, text: '图片' }
  /* { key: 4, text: '买家秀' }, */
]
const sourceOptions = [
  { key: 1, text: '认证赠送' },
  { key: 2, text: '提交申请' },

]
// arr to obj ,such as { CN : "China", US : "USA" }
const typeKeyValue = typeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.text
  return acc
}, {})
const sourceKeyValue = sourceOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.text
  return acc
}, {})
const statusOptions = [
  { key: 0, text: '待审核' },
  { key: 1, text: '审核通过' },
  { key: 2, text: '不通过' },
  { key: 3, text: '已撤回' }
]

// arr to obj ,such as { CN : "China", US : "USA" }
const statusKeyValue = statusOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.text
  return acc
}, {})

export default {
  name: 'trendsList',
  components: {
    Pagination, ImageSource,
    MultipleUpload,
    SingleVideoUpload
  },
  directives: { waves },
  filters: {
    sourceFilter(source){
      return sourceKeyValue[source]
    },
    typeFilter(status) {
      return typeKeyValue[status]
    },
    statusFilter(type) {
      return statusKeyValue[type]
    }
  },
  data() {
    return {
      downloadWalkMemberOptions: [],
      shopOptions:[],
      currentTopImgSrcList:[],
      verifyForm: {},
      dialogVerifyVisible:false,
      props: { label: 'name', value: 'id', children: 'children', checkStrictly: true, multiple: true },
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        pageSize: 20
      },
      trendsForm: {},
      dialogFormVisible: false,
      dialogVideoVisible: false,
      dialogViewVisible: false,
      dialogCommentVisible: false,
      dialogType: '',
      multipleSelection: [],
      typeOptions,
      statusOptions,
      activeName: '0',
      goodsOptions: [],
      videoUrl: '',
      trendsDetail: {},
      trendsGoodsDetail: {},
      commentList: [],
      commentTotal: 0,
      commentListLoading: true,
      commentListQuery: {
        page: 1,
        pageSize: 20
      },
      activeNames: []
    }
  },
  created() {
    this.getDownloadWalkMemberOptions();
    const downloadWalkMemberId = this.$route.query && this.$route.query.downloadWalkMemberId
    if (downloadWalkMemberId) {
      this.listQuery.walkMemberId = downloadWalkMemberId;
    }
    this.getList()
    this.getShopList()
  },
  methods: {
    handleViewTrends(row) {
      this.trendsDetail = row
      this.currentTopImgSrcList.push(row.imgUrl)
      this.dialogViewVisible = true
    },
    getList() {
      this.listLoading = true
      this.listQuery.dateFrom = renderTime(this.listQuery.startTime)
      this.listQuery.dateTo = renderTime(this.listQuery.endTime)
      getDownloadList(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    getShopList() {
      getShopSelector().then(response => {
        this.shopOptions = response.data
      })
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    handleClickTab(tab, event) {
      this.listQuery.page = 1
      this.listQuery.pageSize = 20
      this.activeName = tab.name
      this.listQuery.type = this.activeName == '0' ? null : this.activeName
      this.getList()
    },
    viewVideo(row) {
      this.videoUrl = ''
      this.videoUrl = row.videoUrl
      this.dialogVideoVisible = true
      document.getElementById('playVideos').src = row.videoUrl
    },
    closeVideoDialog() {
      document.getElementById('playVideos').src = ''
      this.dialogVideoVisible = false
    },
    getDownloadWalkMemberOptions() {
      getDownloadWalkMemberSelector().then(response => {
        this.downloadWalkMemberOptions = response.data
      })
    },
    handleSelect() {
      this.$forceUpdate()
    },
  }
}
</script>

<style lang="scss" scoped>

.el-radio {
  margin-right: 0px !important;
}

.el-select-dropdown {
  span {
    white-space: pre !important;
  }
}

.el-select-dropdown__item {
  white-space: pre !important;
}

</style>
